﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div>
        <select id="dropdownil" style="width: 150px;" onchange="OnDropDownilSelect();">
        </select>
    </div>
    <div>
        <select id="dropdownilce" style="width: 150px;">
        </select>
    </div>



    <script type="text/javascript">

        var request = new XMLHttpRequest();
        var ililcedata = null;
        request.onreadystatechange = function (data) {
            if (data.target.readyState == 4 && data.target.status == 200) {
                ililcedata = JSON.parse(data.target.response);

                var select = document.getElementById("dropdownil");
                select.options.length = 0; // clear out existing items
                for (var i = 0; i < ililcedata.length; i++) {
                    var d = ililcedata[i];
                    select.options.add(new Option(d.CityName, d.Citycode))
                }

            }
        };
        request.open("GET", "http://localhost:8090/EnterpriseService.svc/GetCities", true);
        request.send();

        function OnDropDownilSelect() {
            var dropdownlist = document.getElementById("dropdownil");
            var selectedil = dropdownlist.value;

            for (var i = 0; i < ililcedata.length; i++) {
                    if (ililcedata[i].Citycode == selectedil) {

                    var select = document.getElementById("dropdownilce");
                    select.options.length = 0; // clear out existing items
                    for (var j = 0; j < ililcedata[i].Towns.length; j++) {
                        var d = ililcedata[i].Towns[j];
                        select.options.add(new Option(d.Name, d.TownId))
                    }

                }
            }

        }

    </script>
</body>
</html>
